<!-- <template>
    <img v-bind:src="pic" alt="">
    <a href="url">去BING</a>
      <h2 @click="handle" :class="name">DDDAMN</h2> 
     <h2 @click="handle" :class="{'red':active}">DDDAMN</h2> 
    <h2 @click="handle" :class="[active ?'red':'green']">DDDAMN</h2>

     <input type="text" @input="onChange" :value="val">
    <h4 @click="changVal">{{ val }}</h4>
</template>  -->

<!-- <script setup>
import { ref } from 'vue'
const pic = "https://p1.ssl.qhimg.com/t012fcabc073de3bd55.jpg"
const url = "https://www.bing.com/search?q=%s&PC=U316&FORM=CHROMN"

let name = ref('')
let active = ref(false)
const handle = () => {
    // name.value = "red"
    active.value = !active.value
}

let val = ref('')
const onChange = (e) =>{
    console.log('onchange',e.target.value);
    val.value = e.target.value
}
const changVal = () =>{
    val.value += '0'
}
</script>

<style lang="css" scoped>
img{
    width: 200px;
}
.red{
    color:red
}
.green{
    color:green
}
</style> -->
 <template>
    <div>
        <h2>{{ msg }}</h2>
        <input type="text" v-model="msg">
    </div>
 </template>
 
 <script setup>
 import {ref} from 'vue'

 const msg = ref('DDAMN')
 </script>
 
 <style lang="css" scoped>
 
 </style>